<!--
## 总结TodoList案例
1. 组件化编码流程：
      - (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
      - (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
          - 1).一个组件在用：放在组件自身即可。
          - 2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。
      - (3).实现交互：从绑定事件开始。
2. props适用于：
      - (1).父组件 ==> 子组件 通信
      - (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
-->

<template>
  <div class="todo-header">
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="addTodo"/>
  </div>
</template>

<script>
// 引入 nanoid，其中该nanoid 是通过分别暴露
import {nanoid} from "nanoid";

export default {
  name: 'MyHeader',
  data() {
    return {
      title: ''
    }
  },
  methods: {
    // 输入任务名称之后，按下回车之后，进行列表展示
    addTodo(event) {
      // 通过事件对象来获取到输入的值
      console.log('addTodo', event.target.value);
      console.log('addTodo', !this.title);

      // 如果this.title是空的话，取反就是false。校验数据
      if (!this.title.trim()) {
        alert("输入不能为空！");
        return
      }
      // 构造任务对象。将用户的输入包装成一个todo对象
      const todoObj = {
        id: nanoid(),
        title: this.title,
        done: false,
      }
      console.log(todoObj)

      // 通知App组件去添加一个todo对象
      // this.addTodoObj(todoObj);
      // 通过自定义事件来实现子组件给父组件传输数据，其中替换使用props父组件给子组件传递函数。
      this.$emit('addTodoObj', todoObj);

      // 添加完毕之后，清空
      this.title = '';
    }
  },
  // 接收App组件传递到MyHeader组件的receive方法
  // props: ['addTodoObj'],
}
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>